<template>
  <div class="detailImgInfo">
    <div class="top">
      <div class="line1"></div>
      <div class="desc">{{ info.desc }}</div>
      <div class="line2"></div>
    </div>
    <div class="content" v-for="(item1, index1) in info.detailImage" :key="index1">
      <div class="title">{{ item1.key }}</div>
      <div class="imgInfoBox">
        <img
          v-for="(item, index) in item1.list"
          :key="index"
          alt=""
          @load='imgsLoaded'
          v-lazy='item'
        />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "DetailImgInfo",
  props: ["detailInfo"],
  data() {
    return {
      info: {},
      count: 0
    };
  },
  created() {
    setTimeout(() => {
      this.info = this.detailInfo
      console.log(this.info)
    }, 1500);
    
  },
  mounted() {
  },
  methods:{
    imgsLoaded(){
      // if(this.count == this.detailInfo.detailImage[0].list.length - 1){
      //   console.log('hello')
        this.$emit('imgsloaded')
      // }
      // this.count ++ 
    }
  },
  computed: {},
};
</script>

<style scoped>
.detailImgInfo {
  padding: 15px 10px;
}
.top {
  position: relative;
}
.top .line1 {
  height: 1px;
  width: 30%;
  background-color: #000;
}
.top .line1::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  background-color: #000;
  position: relative;
  top: -14px;
}
.top .line2 {
  width: 30%;
  background-color: #000;
  height: 1px;
  position: absolute;
  bottom: -15px;
  right: 0;
}
.top .line2::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  background-color: #000;
  position: absolute;
  top: -4px;
  right: 0;
}
.top .desc {
  margin-top: 10px;
  margin-bottom: 10px;
}
.imgInfoBox {
  margin-top: 15px;
}
.content img {
  width: 100%;
}
</style>